<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
        <meta charset="UTF-8"/>
    <title>V基础</title>
</head>
<body>

<div id="app">
    请输入关键字：<input type="text" v-model="keyword" @keyup="sendJsonP">

    <input v-model="inputValue">

   <table>
       <tr v-for="(item,index) in list">
           <td>{{index+1}}</td>
          <td>{{item.plateNo}}</td><td>{{item.simNo}}</td>
           <td>{{item.vehicleId}}</td><td>{{item.deleted}}</td>
       </tr>
   </table>
    <button v-on:click="sendJsonP(keyword)">查询</button>
    <a :href="baidu">百度</a>
    <a :href="index">主页</a>
    <div v-if="total>0" >
        <a v-for="index in pagesize" v-on:click="clickpage(index)" >    {{index}}   </a>
       总数 {{total}}
    </div>


</div>

<script>

    var app=new Vue({
        el:"#app",
        data: {
            inputValue:"测试",
            keyword:{page:1,pagesize:10},
            list:[],
            pagesize:0,
            total:0,
            url:'http://localhost:8924/test/list.action',
            baidu:'http://www.baidu.com',
            index:'index.html'
        },
        methods:{
            clickpage:function(page){
                app.keyword.page=page;
                app.sendJsonP();
            },
            sendJsonP:function () {

                axios.post(app.url,app.keyword)
                    .then(function (response) {
                        var data = response.data.rows;
                        app.list=data;
                        app.pagesize=floatToIntegerUp(response.data.total/10);
                        app.total=response.data.total;
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            }




        }
    })

    /**
     * 数字，数字（包括正整数、0、浮点数），也可以判断是否金额
     * @param z_check_value 要检查的值
     * @return 符合返回true，否false
     * @author lqy
     * @since 2017-01-07
     */
    function isFloat(z_check_value){
        var z_reg = /^((([0-9])|([1-9][0-9]+))(\.([0-9]+))?)$/;//.是特殊字符，需要转义
        return z_reg.test($.trim(z_check_value));
    };

    /**
     * js小数向下取整：浮点数转换成整数，小数点后去掉
     * @param floatNumber
     */
    function floatToInteger(floatNumber){
        if(!isFloat(floatNumber)){
            error("请输入正确的数字");
            return;
        }
        return parseInt(floatNumber);
    };

    /**
     * js 小数向上取整：浮点数转换成整数，如果有小数(1.00不算有小数)，整数加1
     * @param floatNumber
     */
    function floatToIntegerUp(floatNumber){
        var integerNumber = floatToInteger(floatNumber);
        if(floatNumber > integerNumber){
            integerNumber += 1;
        }
        return integerNumber;
    };

</script>

</body>
</html>